<template>
	<view class="his-wrap">
    <text class="iconfont icon-xinxi"></text>
    <view style="flex: 1;">
      <view class="his-group" style="flex: 9.9" v-for="(month, key) in history" :key="key">
        <text class="his-month">{{key}}</text>
        <view class="his-item" v-for="(item, index) in month" :key="index">
          <text class="his-del" @click="deleteHis(key, index)">删除</text>
          <view class="his-detail" @touchstart="touchStart" @touchmove="touchMove(key + index, $event)" :class="key + index === currentEl ? 'goleft' : 'goright'">
            <text class="iconfont icon-cafei"></text>
            <view class="his-content">
              <text style="color: #999;">{{item["date"] | initDay}}</text>
              <text style="display: block;margin-top:18rpx;color: #BBBBBB;">{{item["from"]}}-{{item["to"]}}</text>
            </view>
            <view class="his-duration">
              <text style="font-size: 60rpx;">3</text>
              <text style="margin-left: 16rpx;font-size: 45rpx;">min</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bootom-line">
      <text></text>
      <text>我是有底线的~</text>
      <text></text>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        history: {
          "2月": [
            {
              "date": "2021.02.09",
              "from": "14:12",
              "to": "15:31"
            },
            {
              "date": "2021.02.06",
              "from": "23:02",
              "to": "07:31"
            }
          ],
          "1月": [
            {
              "date": "2021.01.15",
              "from": "14:06",
              "to": "17:21"
            },
            {
              "date": "2021.01.13",
              "from": "13:16",
              "to": "16:45"
            }
          ]
        },
        clientX: 0,
        currentEl: -1
			}
		},
		methods: {
      // 记录条触碰开始事件
      touchStart(e){
        this.clientX = e.changedTouches[0].clientX
      },
      // 记录条触碰时移动事件
      touchMove(key, e){
        let subX = this.clientX - e.changedTouches[0].clientX
        // 如果左滑了，则动态设定对应元素的左滑120rpx，反之则将滑动状态置为0
        this.currentEl = subX < 0 ? -1 : key
      },
      deleteHis(key, index){
        // 先隐藏删除按钮
        this.currentEl = -1
        // 先进行云端删除，成功后进行删除本地显示的记录
        // TODO: 请求接口，删除远端记录
        this.history[key].splice(index, 1)
        if(this.history[key].length <= 0){
          delete this.history[key]
        }
      }
		},
    filters: {
      initDay(data){
        const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
        const date = new Date(Date.parse(data))
        return data + " " + days[date.getDay()]
      }
    }
	}
</script>

<style lang="scss">
  .his-wrap{
    display: flex;
    flex-direction: column;
    padding: 80rpx 0 50rpx 0;
    width: 92%;
    min-height: 100%;
    margin: 0 auto;
  }
  .his-month{
    display: inline-block;
    padding: 20rpx 0;
    color: #7F7F80;
  }
  .his-item{
    position: relative;
    margin-bottom: 30rpx;
    height: 180rpx;
    .his-detail{
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      padding: 40rpx;
      height: 100%;
      background-color: #FFFFFF;
      border-radius: 18rpx;
      box-shadow: 0 8rpx 12rpx rgba($color: #000000, $alpha: .15);
      transition: all .2s ease;
      .his-content{
        padding: 8rpx 0; 
        width: 60%;
        margin-left: 12rpx;
        font-size: 28rpx;
      }
      .icon-cafei{
        font-size: 90rpx;
        line-height: 100rpx;
        color: $sleep-text-color;
      }
      .his-duration{
        line-height: 100rpx;
        color: #333;
      }
    }
    .his-del{
      position: absolute;
      top: 0;
      right: 0;
      display: inline-block;
      padding: 0 32rpx;
      color: #FFFFFF;
      background-color: #FF5A54;
      border-radius: 0 19rpx 19rpx 0;
      font-size: 30rpx;
      line-height: 180rpx;
      text-align: center;
    }
    .goleft{
      border-radius: 0;
      transform: translateX(-120rpx);
    }
    .goright{
      transform: translateX(0);
    }
  }
  .bootom-line{
    color: #BBBBBB;
    font-size: 24rpx;
    text-align: center;
    text{
      place-items: bottom;
    }
    text:not(:nth-child(2)){
      display: inline-block;
      width: 32%;
      height: 2rpx;
      margin-top: 20rpx;
      background-color: #DDDDDD;
    }
    text:first-child{
      float: left;
    }
    text:last-child{
      float: right;
    }
  }
  .icon-xinxi{
    position: absolute;
    top: 100rpx;
    right: 32rpx;
    font-size: 41rpx;
    color: #B4B4B4;
  }
</style>
